const uploaderMixin = {
  data() {
    return {
      rotate: 0, //旋转角度
    }
  },
  created() {},
  methods: {
    //旋转按钮
    tranformImg() {
      let imagePage = document.querySelector(".van-image-preview__index"); //获取图片页面显示的节点
      let imagePar = document.querySelector(".van-swipe__track"); //所有照片节点的父级
      const mytr = document.createElement("BUTTON"); //创建元素
      mytr.innerHTML =
        "<svg t='1644461181099' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2245' width='30' height='30'><path d='M961.45 362.18V137.45l-96.93 96.93C781.45 128.89 652.62 61.16 507.58 62.57 271.24 64.85 72.15 257.78 62.9 493.94 52.86 750.39 257.78 961.45 512 961.45c166.26 0 311.09-90.52 388.83-224.73h-43.78C775.39 861.87 627.8 940.06 463.37 921.2c-187.7-21.52-339.93-174.33-360.76-362.11C75.05 310.47 268.94 100 512 100c132.91 0 250.39 63.49 325.7 161.21L736.73 362.18h224.72z' fill='#eaf0ec' p-id='2246'></path></svg>"; //元素内容，这一堆是阿里巴巴矢量图
      imagePage.appendChild(mytr); //添加到这个节点之后
      mytr.classList.add("ratClass"); //添加类名方便删除
      mytr.addEventListener("click", () => {
        //获取当前页数，因为有空格所以-1
        let index = imagePage.innerHTML.slice(
          0,
          imagePage.innerHTML.indexOf("/") - 1
        ); //获取当前照片下标
        //找到这个照片让他旋转，因为页数和数组下标不一致所以-1,这里之所以子节点的子节点，使用者可以打印出来看一下为什么这样，我是通过一层一层查看才发现这个是图片的节点
        imagePar.childNodes[
          index - 1
        ].style.transform = `rotate(${(this.rotate += 90)}deg)`;
      });
     
      //按钮样式
      mytr.style.color = "white";
      mytr.style.backgroundColor = "#191919";
      mytr.style.border = "0px";
      mytr.style.position = "absolute";
      mytr.style.top = "32px";
      mytr.style.width = "32px";
      mytr.style.left = "-3px";
      mytr.style.cursor = 'pointer'
    },
    resetTranf() {
      this.rotate = 0;
      let imagePar = document.querySelector(".van-swipe__track"); //父级
      //让所有得照片得旋转角度清空
      if (imagePar.childNodes.length) {
        for (let i = 0; i < imagePar.childNodes.length; i++) {
          if (imagePar.childNodes[i].childNodes[0]) {
            imagePar.childNodes[i].childNodes[0].style.transform =
              "rotate(0deg)";
          }
        }
      }
    },
    deleteBtn() {
      this.rotate = 0;
      //移除旋转
      document.querySelector(".ratClass").remove();
    },
  }
}
export default uploaderMixin
